<template>
    <div class="counter">
        <button @click="handleDecrementCounter">-</button>
        <p>{{ count }}</p>
        <button @click="handleIncrementCounter">+</button>
        <button @click="handleResetCounter">Reset</button>
    </div>
</template>

<script lang="ts" setup>
    import { useCounterStore } from '../stores/counter';

    import { storeToRefs } from 'pinia'

    const CounterStore = useCounterStore()
    const { count } = storeToRefs(CounterStore)

    const handleIncrementCounter = () => {
        CounterStore.increment();
        console.log('count', count.value);
    }

    const handleDecrementCounter = () => {
        CounterStore.decrement();
        console.log('count', count.value);
    }

    const handleResetCounter = () => {
        CounterStore.reset();
        console.log('count', count.value);
    }
</script>

<style scoped lang="less">
    /* 这里可以添加样式 */
    .counter {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
</style>